<template>
  <div class="app">
    <tou></tou>
    <div class="tabs">
      <ul>
        <li v-for="(item,index) in arr" key="item"    >
          <router-link :to="item.log"  :class="{active:btt==index}" @click="fu(index)">
            {{item.name}}</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
    <div class="carList" v-show="$store.state.show">
      <div class="mask" @click="showCar"></div>     
      <ul>
        <li>
      <span class="yi">购物车</span>
      <span class="er" @click="test">清空</span>
    </li>
        <li v-for="item in carList" :key="item.name">
          <h4>{{ item.name }}</h4>        
          <p>￥{{ item.price * item.count }}</p>
          <Btns :item="item"></Btns>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from "./store";
import tou from "./views/tou.vue";
import Btns from "./views/zhuti/btns.vue";
import { mapState } from "vuex";
export default {
  data(){
    return{
      btt:0,
     arr:[
     {name:"商品",log: "/goods"},
     {name:"评价",log: "/rating"}, 
     {name:"商家",log: "/seller"}, 
    ]
    }
  },
  components: {
    tou,
    Btns,
  },
  methods:{
    showCar() {
      this.$store.commit("showCar");
    },
  fu(index){
    this.btt=index
  },
  test(){
    this.$store.commit("setCar"); 
     }
  },
  computed: {
    ...mapState(["carList"]),
   
  },
  
};
</script>
<style lang="less" scoped>
.app {
  height: 100%;
  position: relative;
  .carList {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(7, 17, 27, 0.6);
    }
    ul {
      position: absolute;
      bottom: 50px;
      width: 100%;
      left: 0;
      height: 200px;
      background:#fff;
      // display: flex;
    }
    li{
      display: flex;
      line-height: 24px;
      justify-content: space-between;
      padding: 5px;
      border: 0.5px rgb(7,17,27,0.1) solid;
      
      p{
        padding-left:178px ;
        color: red;
        font-size: 15px;
        font-weight:700;
        
      }

    }
    ul>li:nth-child(1){
      display: flex;
      justify-content: space-between;
     background-color: #f3f5f7;

    }
    span{
      line-height: 40px;
      background-color: #f3f5f7;
      width: 100%;
    }
    .yi{
      font-size: 14px;
      font-size: 200;
      color: rgb(7,17,27);
    }
    .er{
      font-size: 12px;
      color: rgb(0,160,200);
      margin-left: -1px;
      text-align: right;
    }
  }
}
.tabs {
  height: 100%;
  overflow: hidden;
  ul {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    
    li {
      height: 40px;
      line-height: 40px;
        
    }
    .active{
  color: red;
}
  }
}
.carList ul li {
  display: flex;
}

</style>
